@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    .Bunraku {
        width: 100%;
        height: r(465);
        position: absolute;
        top: 0;
        background: #38c398;
        .top{
            margin-top:r(30) ;
            margin-left: r(30);
            a {
                img {
                    width: r(22);
                    height: r(34);
                }
            }
        }
        .top1 {
            width: r(120);
            height: r(120);
            margin: auto;
            font-size: r(50);
            text-align: center;
            color: #FFFFFF;
            .p1 {
                padding-top: r(120);
            }
            .p2 {
                font-size: r(19);
                line-height: r(50);
            }
        }
    }
    .Bunraku_1 {
        position: relative;
        ul {
            width: 100%;
            height: r(107);
            position: absolute;
            bottom: 0;
            background: #FFFFFF;
            li {
                width: 25%;
                height: r(102);
                float: left;
                p {
                    width: r(100);
                    height: r(102);
                    font-size: r(20);
                    line-height: r(102);
                    margin: 0 auto;
                    text-align: center;
                }
            }
            .l2 {}
            .li1 {
                p {
                        border-bottom: r(5) solid #009cea;
                    a {
                        display: inline-block;
                        color: black;
                    }
                }
            }
            .li2 {
                transition: 22s;
                a {
                    color: #d9d9d9;
                }
            }
            .li2:hover,
            .li2:focus,
            .li2:active
            {
                p {border-bottom: r(5) solid #009cea;
                    a {
                        display: inline-block;
                        color: black;
                        
                    }
                }
            }
        }
    }
    .Bunraku2 {
        position: absolute;
        top: r(465);
        width: 100%;
        font-size: r(30);
        text-align: center;
        color: #FFFFFF;
        p {
            margin-top: r(30);
        }
        .c1 {
            padding-top: r(100);
        }
        .c2 {
            padding-top: r(40);
        }
        .Bunraku2_1 {
            width: r(375);
            height: r(375);
            background: url(../../img/img2/Bunraku1.png);
            background-size: r(375) r(375);
            span {
                line-height: r(80);
            }
        }
        .Bunraku2_2 {
            width: r(375);
            height: r(375);
            background: url(../../img/img2/Bunraku2.png);
            background-size: r(375) r(375);
            span {
                line-height: r(80);
            }
        }
        .Bunraku2_3 {
            width: r(375);
            height: r(375);
            background: url(../../img/img2/Bunraku3.png);
            background-size: r(375) r(375);
            span {
                line-height: r(80);
            }
        }
        .Bunraku2_4 {
            width: r(375);
            height: r(375);
            background: url(../../img/img2/Bunraku4.png);
            background-size: r(375) r(375);
            span {
                line-height: r(80);
            }
        }
        .Bunraku2_5 {
            width: r(375);
            height: r(375);
            background: url(../../img/img2/Buniaku9.png);
            background-size: r(375) r(375);
        }
        .Bunraku2_6 {
            width: r(375);
            height: r(375);
            background: url(../../img/img2/Bunraku10.png);
            background-size: r(375) r(375);
        }
    }
}